<template>
    <div class="qr_panel">
			<title-bar :title="'邀请团长'" />
        <img v-if="qrImage" :src="qrImage" alt="二维码" width="200px" height="200px">
 		<van-button round type="danger" size="large" @click="showShare=true">发送邀请推荐</van-button>
        <div class="share_mask" v-if="showShare" @click="showShare=false"><img src="@/assets/images/sharebg.png"></div>
    </div>
</template>
<script>
import {
  QR_CREATE
} from '@/api/global';

import wxConfig from '@/vue/mixin/wx-config';
import logo from '@/assets/images/logo.jpg';
import TitleBar from '@/vue/components/title-bar/';

export default {
  mixins: [wxConfig],
  data() {
    const user = this.getUser();
    const url = this.getUri() + 'user/shop-reg?code=' + user.myCode + '&upname=' + (user.realname || user.nickname) + '&upxiaoqu=' + user.tXiaoqu + '&upcenter=' + user.centreId;
    return {
      qrImage: this.$deployApi + QR_CREATE + "?c=" + encodeURIComponent(url),
      url,
      showShare: false
    }
  },

  created() {
    this.wxconfig();
    this.$nextTick(() => {
       this.wxShare((this.user.realname || this.user.nickname) + '诚邀您为锦致生活社区团长'
        , '高薪团长，月入过万，一份真正钱多、事少、离家近的自由事业'
        , this.url
        , location.origin + logo);
    }); 
  }, 
	components: {
		[TitleBar.name]: TitleBar
	},
}
</script>
<style lang="scss" scoped>
.qr_panel {
    width: 100vw;
    height: 100vh;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    > img {
        max-width: 100%;
        max-height: 100%;
    }
    > button {
        position: absolute;
        bottom: 10px;
        left: 0;
    }
}
.share_mask {
    background-color: black;
    opacity: 0.8;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    > img {
        width: 180px;
        position: absolute;
        right: 0;
        top: 0;
    }
}
</style>

